<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
	<head>
		<title>��ֱ�˵�-3</title>
		<style>
			#main {
				width: 100%;
				border: 1px solid red;
			}
			#navigateBar {
				width: 250px;
				border: 1px solid gray;
				margin: 0 auto;
			}
			a{
				display: block;
				height: 0;
				line-height:0;
				text-decoration: none;
				border-top: 20px solid white;
				border-bottom: 20px solid white;
				border-left: 20px solid white;
				border-right: 20px solid white;
			}
			a:hover {
				border-top: 20px solid gray;
				border-bottom: 20px solid gray;
				border-color: white red;
			}
			.left {
				margin-top: -20px;
				height: 40px;
				line-height: 40px;
				display: block;
				text-align: center;
				border: 1px solid gray;
			}
			#first,#last {
				margin: 0;
			}
		</style>
	</head>
	<body>
	<!-- 
		Ps:����ͷ��DTD˵����IE�������"margin:auto;"ʧЧ������
	 -->
	<div id="main">
		<div id="navigateBar">
			<a id="first" href="javascript:;">
				<span class="left">�������</span>
			</a>
			<a href="javascript:;">
				<span class="left">�������</span>
			</a>
			<a href="javascript:;">
				<span class="left">�������</span>
			</a>
			<a href="javascript:;">
				<span class="left">�������</span>
			</a>
			<a id="last" href="javascript:;">
				<span class="left">�������</span>
			</a>
		</div>
	</div>
	</body>
</html>
